<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable width="25%">
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="190px" v-loading="loading">
            <el-row  class="mb20">
              <el-form-item label="类型" prop="informationType">
                <el-input v-if="form.informationType==0" placeholder="资料商城" disabled/>
                <el-input v-if="form.informationType==1" placeholder="试卷商城" disabled/>
              </el-form-item>
			</el-row>
              <el-row class="mb20">
                  <el-form-item label="姓名" prop="name">
                      <el-input v-model="form.name" placeholder="请输入姓名"/>
                  </el-form-item>
              </el-row>
              <el-row  class="mb20">
                  <el-form-item label="联系方式" prop="phone">
                      <el-input v-model="form.phone" placeholder="请输入电话"/>
                  </el-form-item>
              </el-row>
              <el-row  class="mb20">
                  <el-form-item label="邮箱" prop="mail">
                      <el-input v-model="form.mail" placeholder="请输入邮箱"/>
                  </el-form-item>
              </el-row>
              <el-row  class="mb20" style="margin-left: -120px">
                  <el-form-item>
                      <el-upload ref="uploadjpg" :file-list="fileList" limit="1" accept=".jpg,.png" class="upload-demo"  :action="officeUrl + '/uploadFile'"  :on-success="getFile" style="width: 600px">
                          <el-button type="primary">上传二维码</el-button>
                          <div class="el-upload__tip" style="margin-left: 15px"><i style="color: red;margin-right: 10px">*</i>支持扩展名：.jpg/.png 且不超过5MB</div>
                      </el-upload>
                  </el-form-item>
              </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="SpkInformationDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/train/spkInformation'
import { rule } from '/@/utils/validate';
import {ref} from "vue";
import {office} from "/@/api/train/kszlFile";
import {ElMessage, UploadUserFile} from "element-plus";
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const fileList = ref<UploadUserFile[]>([])
const visible = ref(false)
const loading = ref(false)
const officeUrl = ref()
const uploadjpg = ref()
// 定义字典

// 提交表单数据
const form = reactive({
		id:'',
	  informationType: '',
	  name: '',
	  phone: '',
	  mail: '',
	  onlyOfficeId: '',
});

// 定义校验规则
const dataRules = ref({
    informationType: [{ required: true, message: '请输入类型',trigger: 'change'}],
    name: [{ required: true, message: '请输入姓名',trigger: 'change'}],
    phone: [{ required: true, message: '请输入电话',trigger: 'change'}],
    mail: [{ required: true, message: '请输入邮箱',trigger: 'change'}],
    onlyOfficeId: [{ required: true, message: '请上传二维码',trigger: 'change'}],
})

// 打开弹窗
const openDialog = (id: string) => {
    office().then((res)=>{
        officeUrl.value = res.data
    })
  visible.value = true
  form.id = ''

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
        uploadjpg.value.clearFiles()
	});

  // 获取spkInformation信息
  if (id) {
    form.id = id
    getspkInformationData(id)
  }
};
const getFile = (val:any) =>{
    // console.log('上传成功',val)
    form.fileSize =  val.data.size
    form.onlyOfficeId = val.data.id
}
// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;
    if( form.fileSize / 1024 / 1024 <= 5) {
        try {
            loading.value = true;
            form.id ? await putObj(form) : await addObj(form);
            useMessage().success(form.id ? '修改成功' : '添加成功');
            visible.value = false;
            emit('refresh');
        } catch (err: any) {
            useMessage().error(err.msg);
        } finally {
            loading.value = false;
        }
    }else{
        ElMessage({
            message: '图片大小已超过5MB',
            type: 'warning',
        })
    }
};


// 初始化表单数据
const getspkInformationData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>